<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<template v-if="token&&isLogin">
			<view class="search-data">
				<view class="fix-wrap">
					<view class="select-bar">
						<navigator :url="'/package_common/search_tool/search_tool?dev_type='+dev_type+'&typeid='+select_dev.typeid"
							hover-class="none" class="change-btn">
							<view class="select-data">{{select_dev.name}}</view>
							<view class="iconfont f-s24">&#xe623;</view>
						</navigator>
					</view>
					<view class="date-bar">
						<view class="date start-date" @click="changeDate(1)">
							<input type="text" v-model="params.startDate" placeholder="选择开始时间" disabled="true"
								class="inp">
						</view>
						<view class="date end-date" @click="changeDate(2)">
							<input type="text" v-model="params.overDate" placeholder="选择结束时间" disabled="true"
								class="inp">
						</view>
						<view class="btn" @click="search">查询</view>
					</view>
				</view>
			</view>

			<template v-if="loadingState.default">
				<loading :loadingState="loadingState"></loading>
			</template>
			<template v-else>
				<view class="body">
					<template v-if="list.data.length>0">
						<view class="list-wrap">
							<view class="item" v-for="(item,index) in list.data" :key="index">
								<view class="pic">
									<image :src="web_host+'/image/compress.html?from=miaoqing&path='+item.photo_path"
										mode="widthFix" class="img"></image>
								</view>
								<view class="time">{{item.photo_date}}</view>
							</view>
						</view>
						<loading :loadingState="loadingState"></loading>
					</template>
					<empty v-else msg="暂无数据"></empty>
				</view>
				<view class="footer">
					<view class="fix-wrap bottom">
						<navigator :url="'/pages/web_view/web_view?dev_type='+dev_type+'&dev_id='+select_dev.id"
							class="btn" hover-class="none">打开全景</navigator>
					</view>
				</view>
			</template>

			<!-- 弹窗 -->
			<view v-if="flag.isFullPage" class="full-fix-page a-fadein">
				<!-- 日期 -->
				<laydate v-if="flag.isSeleceDate" :type="params.date_type" @selectDate="selectDate"
					@closeDate="closeDate" @clearDate="clearDate"></laydate>

			</view>
		</template>
	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue'
	import empty from '@/components/empty.vue'
	import {
		HOST
	} from '@/config.js'
	import laydate from '@/components/laydate.vue'
	export default {
		name: '',
		data() {
			return {
				isIphoneX: getApp().globalData.isIphoneX,
				appid: getApp().globalData.appid,
				token: uni.getStorageSync('token'),
				userInfo: uni.getStorageSync('userInfo'),
				loginStateUpdate: false,
				isLogin: false,
				dev_type: '',
				params: {
					page: 1,
					limit: 10,
					order: 'desc',
					startDate: '',
					overDate: '',
					date_type: ''
				},
				select_dev: {
					id: '',
					name: '',
					typeid: '',
					update: false
				},
				list: {
					data: []
				},
				loadingState: {
					default: true,
					loading: false,
					completed: false
				},
				flag: { // 弹窗相关
					isFullPage: false,
					isSeleceDate: false
				},
				web_host: HOST
			}
		},
		async onLoad(params) {
			this.select_dev.id = params.dev_id,
			this.select_dev.name = params.dev_name,
			this.dev_type = params.dev_type;
			
			if(params.typeid){
				this.select_dev.typeid=params.typeid;
			}


			if (this.token) {
				this.isLogin = await this.$loginState('check');
				if (this.isLogin) {
					this.getQuanJingData();
				} else {
					this.isLogin = await this.$loginState('reset');
				}
			} 
		},
		async onShow() {

			if (this.loginStateUpdate) {
				this.token = uni.getStorageSync('token');
				this.userInfo = uni.getStorageSync('userInfo');
				this.isLogin = true;
				this.dataInit();
				this.getQuanJingData();
				this.loginStateUpdate = false;
			}
			
			if(!this.token&&!this.isLogin){
				this.isLogin=await this.$loginState('reset'); 
			}

			// 设备切换
			if (this.select_dev.update) {
				this.dataInit();
				this.getQuanJingData();
				this.select_dev.update = false;
			}



		},
		onReachBottom() {
			if (this.loadingState.completed) {
				this.params.page = 1;
				return false
			} else {
				this.params.page++;
				this.getQuanJingData();
			}
		},
		methods: {

			dataInit: function() {
				this.params.page = 1;
				this.list.data = [];
				this.loadingState.default = true;
				this.loadingState.loading = false;
				this.loadingState.completed = false;
			},

			getQuanJingData: async function() {
				let res = await this.$api.tool_api.getQuanJingData({
					appid: this.appid,
					token: this.token,
					user_id: this.userInfo.uid,
					device_id: this.select_dev.id,
					page: this.params.page,
					limit: this.params.limit,
					order: this.params.order,
					startDate: this.params.startDate,
					overDate: this.params.overDate
				})
				if (res.data.ret == 1000) {
					if (res.data.data) {
						this.list.data = this.list.data.concat(res.data.data);
						if (res.data.data.length < this.params.limit) {
							this.loadingState.default = false;
							this.loadingState.loading = false;
							this.loadingState.completed = true;
						} else {
							this.loadingState.default = false;
							this.loadingState.loading = true;
						}
					} else {
						this.loadingState.default = false;
					}

				} else if (res.data.ret == 1002) {
					this.loadingState.default = false;
					this.loadingState.loading = false;
					this.loadingState.completed = true;
				}
			},

			// 打开选择查询日期组件
			changeDate: function(type) {
				//type ==1 开始日期 2 终止日期
				this.params.date_type = type;
				this.showPopup('show', 'isSeleceDate');
			},

			// 弹窗
			showPopup: function(type, name) {
				if (type == 'show') {
					this.flag.isFullPage = true;
					this.flag[name] = true;
				} else if (type == 'hide') {
					for (let i in this.flag) {
						this.flag[i] = false;
					}
				}
			},

			// 选择日期
			selectDate: function(data) {
				this.flag.isFullPage = false;
				this.flag.isSeleceDate = false;
				if (data.type == 1) {
					this.params.startDate = data.date;
				} else {
					this.params.overDate = data.date;
				}
			},

			// 关闭日期控件
			closeDate: function() {
				this.showPopup('hide')
			},

			// 清空日期
			clearDate: function(data) {
				this.flag.isFullPage = false;
				this.flag.isSeleceDate = false;
				this.params.startDate = '';
				this.params.overDate = '';
			},

			search: function() {
				this.dataInit();
				this.getQuanJingData();
			}
		},
		computed: {

		},
		components: {
			loading,
			empty,
			laydate
		},
	}
</script>

<style lang="less">
	.list-wrap {
		display: flex;
		flex-wrap: wrap;
		padding-left: 20rpx;

		.item {
			width: 47%;
			margin: 0 20rpx 20rpx 0;
			padding-bottom: 10rpx;
			background: #fff;
			border-top-left-radius: 15rpx;
			border-top-right-radius: 15rpx;

			.pic {
				display: flex;
				justify-content: center;
				align-items: center;

				.img {
					border-top-left-radius: 15rpx;
					border-top-right-radius: 15rpx;
				}
			}

			.pest-count {
				padding: 5rpx 0;
				margin: 10rpx 10rpx 0;
				background: #ccc;
				border-radius: 10rpx;
				text-align: center;
				font-size: 30rpx;
				color: #fff;
			}

			.active {
				background: #09f;
			}

			.time {
				padding: 5rpx 10rpx;
				font-size: 30rpx;
			}
		}
	}

	.btn {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: #0085ff;
		color: #fff;
		font-size: 30rpx;
	}
</style>
